<template>
  <div id="person">
    <el-container class="sideNav">
      <el-menu
        default-active="userInfo"
        class="el-menu-vertical-demo"
        text-color="#fff"
        active-text-color="#e0eee8"
        background-color="#5a6b77"
        style=" border: 0"
        :collapse="isCollapse"
        router
      >
        <el-menu-item index="userInfo" route="/userInfo">
          <img
            :src="user.headImage"
            style="width: 24px; height: 24px;margin-right:5px;border-radius:50%;"
          />
          <span slot="title">{{user.nickname}}</span>
        </el-menu-item>
        <el-menu-item index="contentNav" route="/contentNav">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
        <el-menu-item @click="loginOut()">
          <i class="el-icon-switch-button"></i>
          <span slot="title">退出</span>
        </el-menu-item>
        <el-menu-item @click="isCollapse = !isCollapse">
          <i class="el-icon-s-unfold"></i>
          <span slot="title">展开</span>
        </el-menu-item>
      </el-menu>
    </el-container>
    <router-view class="containerSide"></router-view>
  </div>
</template>
<script>
import { myMixin } from "@/assets/js/mixin";
export default {
  mixins: [myMixin],
  data() {
    return {
      isCollapse: true,
      user: this.$store.state.user
    };
  },
  watch: {
    user:function(newVal) {
      if(newVal == "" || newVal == null) {
        this.$forceUpdate();
      }
    }
  },
  mounted() {
    var token = this.$store.state.token;
    // verify
    if (token == null || token == "") {
      this.loginOut();
    } else {
      if (this.$store.state.user.username != "") {
        return;
      } else {
        this.$axios
          .get(this.$const.domain + "/v1/user/getUserInfo", {
            headers: this.headers
          })
          .then(res => {
            if (res.data.code == 200) {
              this.user = res.data.data;
              this.$store.commit("setUser", res.data.data);
            } else {
              this.loginOut();
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: rgb(76, 92, 104) !important;
}
</style>